"use client";
import React, {useState} from "react";
import {Box, Group} from "@mantine/core";
import classes from "./page.module.css";
import {IpdSimuUtil} from "@/components/IpdSimuConfigs/IpdSimuUtil";
import {IpdSimuGran} from "@/components/IpdSimuConfigs/IpdSimuGran";
import {IpdSimuTrans} from "@/components/IpdSimuConfigs/IpdSimuTrans";
import {IpdSimuErr} from "@/components/IpdSimuConfigs/IpdSimuErr";
import {IpdSimuHeader} from "@/components/IpdSimuSteps/IpdSimuHeader";
import {IpdSimuStepsCheck} from "@/components/IpdSimuStepsCheck/IpdSimuStepsCheck";
import {IpdSimuConfigDisp} from "@/components/IpdSimuConfigs/IpdSimuConfigDisp";
import {StepTwoSimuMain} from "./components/StepTwoSimuMain";

export default function Page() {
  // 这些数据都从后端获取，并且实时监测。一旦发生变化，对应组件发生更新
  const [isChecked, setIsChecked] = useState(false); // 页面级数据确认
  const [simulationState, setSimulationState] = useState<"IDLE" | "RUNNING" | "FINISHED">("IDLE"); // 仿真状态
  const [progress, setProgress] = useState(0); // 进度
  const utilization = 80; // 利用率
  const granularity = "10G"; // 最小颗粒度
  const transRange = "全部转换"; // 转换范围
  const transRule = "6 x 1G = 1 x 10G, 6 x 10G = 1 x 100G"; // 转换规则

  return (
    <>
      {/* 第一层：顶部信息和导航 */}
      <Box className={classes.box}>
        <IpdSimuHeader
          stepName={"第二步：中继仿真"}
          backwardEnable={true}
          backwardLink={"/ipdv2/tools/relay-simulation/step1"}
          forwardEnable={isChecked}
          forwardLink={"/ipdv2/tools/relay-simulation/step3"}
        />
      </Box>

      {/* 第二层：快捷操作 */}
      <Box className={classes.top}>
        <Group justify="space-between">
          <Group gap="xs">
            {/* 利用率配置 */}
            <IpdSimuUtil value={utilization} disabled={isChecked} />
            {/* 最小颗粒度配置 */}
            <IpdSimuGran value={granularity} disabled={isChecked} />
            {/* 转换关系配置 */}
            <IpdSimuTrans disabled={isChecked} />
            {/* 故障轮询 */}
            <IpdSimuErr disabled={isChecked} />
          </Group>
          <IpdSimuStepsCheck isChecked={isChecked} setIsChecked={setIsChecked} />
        </Group>
      </Box>

      {/* 第三层：基础配置信息 */}
      <Box className={classes.info}>
        <IpdSimuConfigDisp
          utilization={utilization}
          granularity={granularity}
          transRange={transRange}
          transRule={transRule}
          errSimu={true}
        />
      </Box>

      {/* 第四层：页面主体内容 */}
      <Box>
        <StepTwoSimuMain
          progress={progress}
          simulationState={simulationState}
          isChecked={isChecked}
          setProgress={setProgress}
          setSimulationState={setSimulationState}
        />
      </Box>
    </>
  );
}
